<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="评分状态：">
        <el-select style="width: 150px;" v-model="searchStatus" placeholder="请选择">
          <el-option
            v-for="item in kpiStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称：">
        <el-select style="width: 150px;" filterable clearable v-model="searchProjectId" placeholder="请选择">
          <el-option
            v-for="item in projectList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评分人：">
        <el-tooltip class="item" effect="dark" :disabled="assessUsersName.length === 0" :content="assessUsersName" placement="bottom">
          <el-input style="width: 150px;" @click="selectDingUsers('assessUsers', 'assessUsersName')" placeholder="请选择人员" v-model="assessUsersName" :disabled="true"></el-input>
        </el-tooltip>
      </el-form-item>
      <el-button @click="selectDingUsers('assessUsers', 'assessUsersName')" style="margin-right:15px;">选择</el-button>
      <el-form-item>
        <el-button type="primary" @click="searchList(true)">查询</el-button>
        <el-button @click="resetSearch()">重置</el-button>
        <el-button type="primary" @click="notice">通知评分人</el-button>
      </el-form-item>
    </el-form>
    <el-table :height="tableHeight" :data="myTableData" border style="width: 100%">
      <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
      <el-table-column label="项目名称" prop="projectName" min-width="120" align="center"></el-table-column>
      <el-table-column label="考核名称" min-width="180" align="left" header-align="center">
        <template slot-scope="scope">
          <div style="white-space: pre-line;">{{scope.row.evItemName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="考核内容描述" min-width="180" align="left" header-align="center">
        <template slot-scope="scope">
          <div style="white-space: pre-line;">{{scope.row.evItemContent}}</div>
        </template>
      </el-table-column>
      <el-table-column label="评分人" prop="scoresGiverName" width="90" align="center">
        <template slot-scope="scope">
          <span @click="filterList(scope.row)" style="color:#66b1ff;cursor:pointer;">{{scope.row.scoresGiverName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="评分" prop="kpiItemIndex" width="90" align="center">
        <template slot-scope="scope">
          {{scope.row.scores ? scope.row.scores + '分' : '未评分'}}
          <el-tooltip v-if="scope.row.scores" placement="bottom" effect="light">
            <div slot="content">
              {{scope.row.remark}}
            </div>
            <span style="color:#66b1ff;cursor:pointer;"><i class="el-icon-tickets"></i></span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center" header-align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 1 && !scope.row.scores " @click="openChangeDialog(scope.row)" type="text" size="small">变更评分人</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="myPageConfig.pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="myPageConfig.pageSize"
      :total="myPageConfig.totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog title="变更评分人" :visible.sync="changeDialog" width="600px">
      <el-form :model="form" style="padding-right:100px;" label-width="120px">
        <el-form-item label="原评分人：">
          <el-input type="text" disabled v-model="form.oldName"></el-input>
        </el-form-item>
        <el-form-item label="新评分人：">
          <span v-if="reAssessUserName" @click="selectDingUsers('reAssessUser','reAssessUserName')" style="color:#66b1ff;cursor:pointer;">{{reAssessUserName}}</span>
          <el-button v-if="!reAssessUserName" @click="selectDingUsers('reAssessUser','reAssessUserName')" style="margin-right:15px;">选择</el-button>
        </el-form-item>
        <p class="notice">注：一旦发生变更，原评分人的评分任务将会被取消。</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeDialog = false">取 消</el-button>
        <el-button type="primary" @click="reAssess">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import dingMixin from  '@/mixins/ding'
  import * as dd from 'dingtalk-jsapi'
  import formUtil from '@/utils/formUtil'

  export default {
    data() {
      return {
        projectList: [],
        searchProjectId: '',
        changeDialog: false,
        kpiStatus: [{
          value: '',
          label: '全部'
        }, {
          value: true,
          label: '已评分'
        }, {
          value: false,
          label: '未评分'
        }],
        searchStatus: '',
        myTableData: [],
        form: {
          oldName: 1,
          scoreId: '',
          dingId: '',
          oldId: ''
        },
        myPageConfig:{
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0
        },
        assessUsers: [],
        assessUsersName: '',
        reAssessUser: [],
        reAssessUserName: '',
        tableHeight: window.tableHeight
      };
    },
    mixins: [dingMixin],
    activated() {
      this.tableHeight = document.documentElement['clientHeight'] - 270
      window.onresize = () => {
        this.tableHeight = document.documentElement['clientHeight'] - 270
      }
    },
    async mounted() {
      let { list } = await this.$httpN.postB('pde/project/list', { 'page': 1, 'limit': 999, 'flag': 1})
      this.projectList = list;
      this.searchList(true);
    },
    methods: {
      openChangeDialog(row) {
        this.changeDialog = true;
        this.reAssessUser = [];
        this.reAssessUserName = '';
        this.form.oldName = row.scoresGiverName;
        this.form.oldId = row.scoresGiverId;
        this.form.scoreId = row.scoreId;
      },
      async reAssess() {
        if(this.reAssessUser.length === 0) return this.$message.error('还未选择评分人')
        if(this.form.oldId === this.reAssessUser[0]) return this.$message.error('评分人相同,不需要变更')
        if(!await this.$httpN.postQ('pde/scores/editGiver',{dingId: this.reAssessUser[0], scoreId: this.form.scoreId})) return;
        formUtil.submitSuccess('变更成功');
        this.changeDialog = false;
        this.searchList();
      },
      filterList(item) {
        this.assessUsersName = item.scoresGiverName;
        this.assessUsers = [item.scoresGiverId];
        this.searchList(true);
      },
      resetSearch() {
        this.assessUsersName = '';
        this.assessUsers = [];
        this.searchStatus = ''
        this.searchProjectId= ''
      },
      selectDingUsers(arr, showName){
        this.complexPicker(1, [], this[arr]).then((data)=>{
          this[arr] = data.map(item => item.emplId);
          let names = data.map(item => item.name);
          this[showName] = names.join(',');
        })
      },
      sizeChangeHandle (val) {
        this.myPageConfig.pageSize = val
        this.searchList(true)
      },
      currentChangeHandle (val) {
        this.myPageConfig.pageIndex = val
        this.searchList()
      },
      async searchList(init) {
        if(init) this.myPageConfig.pageIndex = 1;
        let {list, totalCount} = await this.$httpN.postB('pde/scores/getTask',{
            'page': this.myPageConfig.pageIndex,
            'hasDone': this.searchStatus,
            'limit': this.myPageConfig.pageSize,
            'projectId': this.searchProjectId,
            'dingId': this.assessUsers.join(',')
        });
        this.myTableData = list;
        this.myPageConfig.totalPage = totalCount;
      },
      notice() {
        formUtil.submitConfirm('您确定通知未评分人吗?', async ()=> {
          if(!await this.$httpN.postQ('pde/project/noticeScoresGiver')) return;
          formUtil.submitSuccess('通知成功');
        })
      }
    }
  };
</script>
<style lang="scss" scoped>
  .notice{
    margin-top:10px;
    color:red;
    padding-left:120px;
  }
</style>
